<template>
	<view>
		<map :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :scale="scale">
		</map>
		<view class="bottom">
			<view class="left">
				<view class="txt">取</view>
				<text>{{amapRoute.shopAddress}}</text>
			</view>
			<view class="left">
				<view class="txt">送</view>
				<text>{{amapRoute.recieveAddress}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import route from '../../utils/draw-map.js';

	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				markers: [],
				polyline: [],
				amapRoute:[],
				scale: 15
			}
		},
		methods: {
			amapDrawRoute:function(){
				var midpointArr = this.amapRoute.shopLac.split(',');
				var destinationArr = this.amapRoute.recieveLac.split(',');
				
				console.log(midpointArr);
				console.log(destinationArr);
				// 驾车路线规划
				// route.setUrl('https://restapi.amap.com/v3/direction/driving');  
				// 骑行路线规划
				route.setUrl('https://restapi.amap.com/v4/direction/bicycling');  
				//origin latitude和longitude是number
				const origin = {
					latitude: this.latitude,
					longitude: this.longitude,
					//起点的icon
					iconPath: '../../static/icon/map-startmark.png',
				};
				const midpoint = {
					latitude: midpointArr[1],   //注意经纬度顺序
					longitude: midpointArr[0],
					//起点的icon
					iconPath: '../../static/icon/map-midmark.png',
				};
				const destination = {
					latitude: destinationArr[1], //注意经纬度顺序
					longitude: destinationArr[0],
					//终点的icon
					iconPath: '../../static/icon/map-endmark.png',
				};
				// 驾车调用的线路规划画图
				// route.drawRoute(this,midpoint,destination);	
				// 笔画颜色默认
				// 骑行调用的线路规划画图			
				route.drawRouteBicycle(this,origin,midpoint);
				//主要设置笔画颜色
				var line ={
					 arrowLine: true,
					'points':[],
					 color:'#28f',
					 width:10
				}
				route.drawRouteBicycle(this,midpoint,destination,line);
			},
		},
		onLoad() {
			var that = this;
			//获取当前定位
			uni.getLocation({
				
				success(res){
					console.log(res);
					
					that.longitude = res.longitude;
					that.latitude = res.latitude;
					
					console.log(that.longitude);
					console.log(that.latitude);
					//获取缓存中amapRoute数据
					that.amapRoute = uni.getStorageSync('amapRoute');
					//绘制我-取货点-送货点的路径线路
					that.amapDrawRoute();
				},
				fail(err){
					//提示 '打开定位' 消息
					uni.showModal({
						title: '提示',
						content: '请打开手机定位',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			});
		},
	}
</script>

<style>
	map {
		width: 100%;
		height: 1100rpx;
	}
	.cover{
		display: flex;
		text-align: center;
		background: #999;
	}
	.bottom{
		margin: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.left{
		display: flex;
		flex-direction: row;
		margin: 0 0 20rpx 0;
	}
	.txt{
		margin: 0 20rpx 0 0;
		width: 50rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background-color: #61A6E6;
		border:1rpx solid #61A6E6;
		color: white;
		text-align: center;  
		line-height: 50rpx;   
	}
	
</style>